<!-- 组件结构 -->
<template>
  <el-row>
  <h2>2.popover动画</h2>
    <el-col :span="6" :offset="6">
      <el-popover  width="400" trigger="click" transition="popover-transform">
      <el-table :data="gridData">
        <el-table-column width="150" property="date" label="日期"></el-table-column>
        <el-table-column width="100" property="name" label="姓名"></el-table-column>
        <el-table-column width="300" property="address" label="地址"></el-table-column>
      </el-table>
      <el-button slot="reference">click 激活</el-button>
    </el-popover>
  </el-col>
  <el-col :sapn="24">
  <p>主要代码：</p>
       <div v-highlight>
          <pre>
              <code class="language-html">{{ codeHtml }}</code>
          </pre>
        </div>
        <el-button :data-clipboard-text="codeHtml" @click="copy" id="equSN">复制代码</el-button>
  </el-col>
</el-row>
 
</template>

<!-- 组件交互相关 -->
<script>
import Clipboard from 'clipboard'
export default{
  name:"Popover",
  data() {
    return {
      codeHtml:`<style>\r\n.popover-transform-enter-active,\r\n.popover-transform-leave-active {\r\n  transition: all .5s;\r\n}\r\n.popover-transform-enter,\r\n.popover-transform-leave-to {\r\n  opacity: 0;\r\n  transform: translate(-50px,-50px) scale(0.3);\r\n}\r\n<\/style>`,
      gridData: [
        {
          date: "2016-05-02",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-04",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-01",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-03",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
      ],
    };
  },
  methods: {
   copy(){
     const clipboard=new Clipboard("#equSN")
     clipboard.on('success',e=>{
      this.$message.success('复制成功')
      clipboard.destroy()
     })
     clipboard.on('error',e=>{
      this.$message.warning('该浏览器不支持')
      clipboard.destroy()
     })
   }
  },
}

</script>

<!-- 组件样式 -->
<style>
.popover-transform-enter-active,
.popover-transform-leave-active {
  transition: all .5s;
}
.popover-transform-enter,
.popover-transform-leave-to {
  opacity: 0;
  transform: translate(-50px,-50px) scale(0.3);
}

</style>

